<template>
  <div class="tableForm">
    <el-form
      inline
      ref="ruleFormRef"
      :model="ruleForm"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="" prop="">
        <div class="block">
          <el-date-picker
            @change="handleChange"
            v-model="ruleForm.timeArr"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            type="daterange"
            :popper-options="{ placement: 'bottom-start' }"
          />
        </div>
      </el-form-item>
      <el-form-item label="">
        <el-select
          @change="handleChangeStatus"
          v-model="ruleForm.status"
          class="m-2 ml10"
          placeholder="开票状态"
          size="large"
          style="width: 200px"
          clearable
        >
          <el-option
            v-for="item in statusList"
            :key="item.type"
            :label="item.name"
            :value="item.type"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table v-loading="loading" :data="tableData" style="height: 400px">
        <!-- <el-table-column prop="invoiceInfo" label="订单信息" /> -->
        <el-table-column label="申请人">
          <template #default="scope">
            <p>
              {{
                JSON.parse(get(scope.row, 'invoiceInfo', '{}')).bankName || ''
              }}
            </p>
            <!-- <p>
              税号:{{
                JSON.parse(get(scope.row, 'invoiceInfo', '{}')).bankRoot || ''
              }}
            </p> -->
          </template>
        </el-table-column>
        <el-table-column label="发票内容">
          <template #default="scope">
            <p>
              {{
                JSON.parse(get(scope.row, 'invoiceInfo', '{}')).bankRoot || ''
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="申请时间" />
        <el-table-column prop="fee" label="开票金额" />
        <el-table-column prop="" label="收件邮箱 " />
        <el-table-column label="开票状态">
          <template #default="scope">
            <span> {{ InvoiceStatus[scope.row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="驳回原因 " />
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { formatDateYMD } from '@/utils';
import withdraw from '@/modules';
import { get } from 'lodash';
const { invoiceListApi, InvoiceStatus } = withdraw; //
const ruleFormRef = ref();
const prop = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const ruleForm = reactive({
  timeArr: '',
  status: '',
});
const tableConfig = ref({
  page: 1,
  pageSize: 10,
  startTime: '',
  endTime: '',
  status: '', //已驳回 1 开票2 待开票 3
});
const tableData = ref([]);
const statusList = ref([
  {
    type: 2,
    name: '已驳回',
  },
  {
    type: 1,
    name: '已开票',
  },
  {
    type: 0,
    name: '待开票',
  },
]);
// 使用 watch 观察 tableData 的变化
watch(
  () => prop.tableData,
  (newValue) => {
    newValue ? (tableData.value = newValue) : [];
  },
  { immediate: true, deep: true }
); // 立即执行以查看初始数据
const handleChange = (val) => {
  if (val) {
    tableConfig.value.startTime = formatDateYMD(new Date(val[0]));
    tableConfig.value.endTime = formatDateYMD(new Date(val[1]));
  } else {
    tableConfig.value.startTime = '';
    tableConfig.value.endTime = '';
  }
  tableDataList();
};
const handleChangeStatus = (val) => {
  tableConfig.value.status = val;
  tableDataList(tableConfig.value);
};
const tableDataList = async () => {
  const { data } = await invoiceListApi(tableConfig.value);
  tableData.value = data.data;
};
</script>
<style scoped lang="scss">
:deep(.el-range-editor.el-input__wrapper) {
  height: 40px;
}
.tableForm {
  padding-top: 20px;
}
</style>
